<template>
  <div class="container">
    <Navbar></Navbar>
    <header>
      <div>
        <img :src="mnnu" alt="" width="200px" />
      </div>
      <div class="logo">
        <img :src="logo" alt="" width="150px" />
      </div>
      <Search class="pos" @search="search"></Search>
    </header>
    <div class="categories" @mouseleave="notShow" @mousemove="show" :class="{ show: onshow, 'no-show': !onshow }">
      <ul @click="classify">
        <li @click.stop="getItems('/api/home/items')">全部商品</li>
        <li>零食</li>
        <li>面包</li>
        <li>水果</li>
        <li>面包</li>
        <li>面包</li>
      </ul>
    </div>
    <Carousel style="user-select: none;"></Carousel>
    <div class="goods-show clearfix">
      <GoodsCard class="showgoods" v-for="item in items" :key="item._id" :name="item.name" :url="item.cover" :price="item.price" :buyer="item.buyer" :id="item._id"></GoodsCard>
    </div>
    <footer class="footer">
      <img class="svg" :src="footersvg" alt="" />
      <img class="svg" :src="footersvg1" alt="" />
      <img class="svg" :src="footersvg2" alt="" />
      <ul>
        <li>联系我们: 18876230897</li>
        <li>改进建议</li>
        <li>关于我们</li>
      </ul>
    </footer>
  </div>
</template>

<script>
import GoodsCard from '@/components/base/goodscard.vue'
import Search from '@/components/base/search.vue'
import Navbar from '@/components/base/header.vue'
import imgurl from '@/assets/logo.png'
import mnnu from '@/assets/image/mnnu.png'
import Carousel from '@/components/base/carousel.vue'
import { items, searchitems } from '@/api/index.js'
import footersvg from '@/assets/image/homefooter.svg'
import footersvg1 from '@/assets/image/homesvg1.svg'
import footersvg2 from '@/assets/image/homesvg2.svg'

export default {
  components: {
    Navbar,
    Search,
    GoodsCard,
    Carousel
  },
  data() {
    return {
      logo: imgurl,
      mnnu,
      items: [],
      footersvg,
      footersvg1,
      footersvg2,
      onshow: false
    }
  },
  methods: {
    async getItems(url) {
      const response = await items(url)
      this.items = response.data
    },
    show() {
      this.onshow = true
    },
    notShow() {
      this.onshow = false
    },
    search(content) {
      const params = {
        search: content
      }
      this.getSearch('/api/home/search', params)
    },
    async getSearch(url, params) {
      const { data } = await searchitems(url, params)
      if (data.length === 0) {
        alert('404 Not Found!')
      } else {
        this.items = data
      }
    },
    classify(e) {
      const params = {
        category: e.target.innerText
      }
      this.getSearch('/api/home/search', params)
    }
  },
  created() {
    this.getItems('/api/home/items')
  }
}
</script>

<style lang="less" scoped>
li {
  list-style: none;
}
a {
  text-decoration: none;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  background: rgb(234, 232, 235);
  header {
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    height: 250px;
    .pos {
      margin-right: 200px;
    }
  }
  .goods-show {
    background: #fff;
    width: 1150px;
    margin: 0 auto;
    border-radius: 25px;
    padding: 20px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 5px;
    place-items: center center;
  }
}

.show {
  left: 0;
}
.no-show {
  left: -200px;
}
.categories {
  width: 200px;
  height: 400px;
  padding: 60px 20px;
  position: fixed;
  background-color: rgba(#000, 0.8);
  opacity: 1;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  top: 50%;
  z-index: 999;
  color: skyblue;
  transform: translateY(-50%);
  font-size: 18px;
  transition: all 0.3s ease-out;
  &::before {
    content: '>';
    width: 25px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    opacity: 1;
    z-index: 999;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    position: absolute;
    background-color: rgba(#000, 0.8);
    top: 50%;
    right: -25px;
    transform: translateY(-50);
  }
  ul {
    width: 100%;
    height: 100%;
    position: relative;
  }
  li {
    cursor: pointer;
    width: 100%;
    // height: 50px;
    padding: 10px 20px;
    text-align: center;
    transition: all 0.1s ease-out;
    &:hover {
      font-size: 20px;
      color: #fff;
    }
  }
}

.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

.footer {
  user-select: none;
  margin-top: 50px;
  width: 100%;
  height: 250px;
  box-shadow: 1px 0 2px 2px rgba(#a9987c, 0.3);
  background: linear-gradient(to bottom, rgb(234, 232, 235), rgba(#a9987c, 0.3));
  position: relative;
  .svg {
    width: auto;
    height: 100%;
    margin: 0 50px;
  }
  ul {
    position: absolute;
    top: 50px;
    right: 300px;
    li {
      list-style: none;
      color: rgba(#000, 0.7);
      font-weight: 600;
      margin-top: 10px;
      &:hover {
        color: skyblue;
        text-decoration: underline;
      }
    }
  }
}
</style>
